<template>
	<view class="Date">
		<view class="content">
			<view class="title">
				<image class="title_b" src="/static/archives/title.png"></image>
				<view class="esc" @click="esc">取消</view>
				<text>选择时间</text>
				<view class="ack" @click="ack">确认</view>
			</view>
			<picker-view :value="value" :indicator-style="indicatorStyle" @change="bindChange" class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
				</picker-view-column>
			</picker-view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			selectedDate: {
				type: String,
				default: "",
			},
		},
		name: "choicedate",
		data() {
			return {
				years: [],
				year: '',
				months: [],
				month: '',
				days: [],
				day: '',
				value: [],
				indicatorStyle:'indicatorStyle'
			};
		},
		mounted() {
			const date = new Date();
			const year = date.getFullYear()
			const month = date.getMonth() + 1
			const day = date.getDate()
			const selectedYear = new Date(this.selectedDate).getFullYear() || year;
			const selectedMonth = new Date(this.selectedDate).getMonth() + 1 || month;
			const selectedDay = new Date(this.selectedDate).getDate() || day;
			setTimeout(() => {
				this.value = [this.years.indexOf(selectedYear), selectedMonth - 1, selectedDay - 1];
				this.year = selectedYear;
				this.month = selectedMonth < 10 ? `0${selectedMonth}` : selectedMonth;
				this.day = selectedDay < 10 ? `0${selectedDay}` : selectedDay;
			}, 0)
		},
		created() {
			this.init();
		},
		methods: {
			init() {
				const date = new Date();
				const year = date.getFullYear()
				const month = date.getMonth() + 1
				const day = date.getDate()
				const years = []
				const months = []
				for (let i = date.getFullYear() - 3; i < date.getFullYear() + 3; i++) {
					years.push(i)
				}
				for (let i = 1; i <= 12; i++) {
					months.push(i)
				}
				this.years = years
				this.months = months
				this.getDays(year, month);
			},
			getDays(year, month) {
				const day = new Date(year, month, 0).getDate();
				const days = []
				for (let i = 1; i <= day; i++) {
					days.push(i)
				}
				this.days = days;
			},
			bindChange: function(e) {
				const val = e.detail.value
				this.year = this.years[val[0]]
				this.month = this.months[val[1]] < 10 ? `0${this.months[val[1]]}` : this.months[val[1]]
				if (this.value[1] !== val[1]) {
					this.getDays(this.year, this.month);
				}
				this.day = this.days[val[2]] < 10 ? `0${this.days[val[2]]}` : this.days[val[2]]
				this.value = [val[0], val[1], val[2]]
			},
			esc() {
				this.$emit('popType', false);
			},
			ack() {
				const date = `${this.year}-${this.month}-${this.day}`;
				this.$emit('dateSelected', date)
			},
		}
	}
	
</script>

<style lang="scss" scoped>
	indicatorStyle{
		
	}
	
    .Date {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0, .6);
    .content {
        position: absolute;
        bottom: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 700rpx;
        background: #FFFFFF;
        border-radius: 20rpx 20rpx 0rpx 0rpx;
        padding-bottom: 30rpx;
        box-sizing: border-box;
        .title {
            display: flex;
            align-items: center;
            flex: none;
            position: relative;
            width: 100%;
            height: 114rpx;
            font-size: 36rpx;
            font-weight: 500;
            color: #333333;
            overflow: hidden;
            text {
                position: absolute;
                left: 0;
                top: 0;
                display: block;
                width: 100%;
                height: 114rpx;
                line-height: 114rpx;
                text-align: center;
            }
            .title_b {
                width: 100%;
                height: 114rpx;
            }
            .esc {
                position: absolute;
                z-index: 1;
                left: 40rpx;
                font-size: 30rpx;
                color: #666666;
            }
            .ack {
                position: absolute;
                z-index: 1;
                right: 40rpx;
                font-size: 30rpx;
                color: #0063C3;
            }
        }
        .picker-view {
            width: 750rpx;
            height: 586rpx;
            margin-top: 20rpx;
        }
        .item {
            line-height: 68rpx;
            text-align: center;
        }
    }
}
</style>